<template>
    <div class="main">
        <div class="main-header" style="justify-content: space-between;" v-if="buttons.length">
            <div>
                <articleTypeSelect v-model="searchPmCp.cate_id" style="width: 200px;margin-right: 10px;"></articleTypeSelect>
                <el-button @click="search" type="primary">搜索</el-button>
                <el-button @click="reset">重置</el-button>
            </div>
            <div>
                <el-button v-for="(item, index) in buttons" :key="index" :type="item.path | formatType" :icon="item.icon"
                    :disabled="item.path | formatDisabled(selection)" @click="tapButton(item)">{{ item.title }}</el-button>
            </div>
        </div>
        <el-table ref="table" class="main-table" :data="articleData" height="100%" border
            header-cell-class-name="main-table-header" @selection-change="onSelectionChange">
            <el-table-column type="selection" width="39"> </el-table-column>
            <el-table-column prop="sort" align="center" label="序号"></el-table-column>
            <el-table-column prop="title" align="center" label="文章标题"></el-table-column>
            <el-table-column prop="img" align="center" label="文章封面图">
                <template slot-scope="{ row }">
                    <el-image style="width:50px;height:50px;" fit="contain" :src="row.img"
                        :preview-src-list="[row.img]"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="hits" align="center" label="阅读量"></el-table-column>
            <el-table-column align="center" label="创建时间" prop="createtime">
                <template slot-scope="{ row }">
                    {{ row.createtime | formatDate }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="更新时间" prop="updatetime">
                <template slot-scope="{ row }">
                    {{ row.updatetime | formatDate }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="启用状态" prop="status">
                <template slot-scope="{ row }">
                    <el-switch :value="row.status" :active-value="1" :inactive-value="0"></el-switch>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination class="main-pagination" :current-page.sync="page" :page-size="limit" :total="total"
            @current-change="onPageChange" layout="total,jumper,prev,pager,next"></el-pagination>
        <el-dialog :visible.sync="dialogVisible" :title="dialogTitle" append-to-body width="800px" @close="onDialogClose">
            <component :is="dialogView" :articleTypeData="articleTypeData" @update="getArticleData" :selection="selection"
                :content="content"></component>
        </el-dialog>
    </div>
</template>

<script>
import { get, del } from "@/assets/js/http.js";
import articleTypeSelect from "@/components/article-type-select.vue";
export default {
    name: "view-article-type",
    data() {
        return {
            articleData: [],
            page: 1,
            limit: 20,
            total: 0,
            selection: [],
            articleTypeData: [],
            dialogVisible: false,
            dialogTitle: "",
            dialogView: "",
            content: "",
            searchPmCp:{cate_id:''},
            searchPm:{}
        };
    },
    mounted() {
        this.getArticleData();
        this.getArticleTypeData();
    },
    components: {
        Add: () => import("./add.vue"),
        Edit: () => import("./edit.vue"),
        Preview: () => import("./preview.vue"),
        articleTypeSelect
    },
    computed: {
        buttons() {
            return this.$store.state.buttons;
        }
    },
    methods: {
        search(){
            this.page=1
            this.searchPm = {...this.searchPm,...this.searchPmCp}
            this.getArticleData()
        },
        reset(){
            this.page = 1
            this.searchPm = this.$options.data().searchPm
            this.searchPmCp = this.$options.data().searchPmCp
            this.getArticleData()
        },
        async getArticleTypeData() {
            const data = await get({
                url: "/admin/wiki.newsCate/index",
                params: {
                    page: 1,
                    limit: 999
                }
            });
            this.articleTypeData = data.list;
        },
        onPageChange(index) {
            this.page = index;
            this.getArticleData();
        },
        async getArticleData() {
            const data = await get({
                url: "/admin/wiki.news/index",
                loading: true,
                params: {
                    page: this.page,
                    limit: this.limit,
                    ...this.searchPm
                }
            });
            this.articleData = data.list;
            this.total = data.total;
        },
        onAdd() {
            this.dialogTitle = "新增文章";
            this.dialogView = "Add";
            this.dialogVisible = true;
        },
        onEdit() {
            this.dialogTitle = "编辑文章";
            this.dialogView = "Edit";
            this.dialogVisible = true;
        },
        onDelete() {
            this.$confirm(
                `此操作将永久删除该${this.selection.length}个文章, 是否继续?`,
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }
            )
                .then(async () => {
                    let query = "?";
                    for (let i = 0; i < this.selection.length; i++) {
                        const item = this.selection[i];
                        if (i > 0) {
                            query += "&ids[]=" + item.id;
                        } else {
                            query += "ids[]=" + item.id;
                        }
                    }
                    await del({
                        url: "/admin/wiki.news/del" + query,
                        successTip: true,
                        loading: true
                    });
                    this.getArticleData();
                })
                .catch(() => {
                    this.$refs.table.clearSelection();
                });
        },
        onSelectionChange(selection) {
            this.selection = selection;
        },
        onRowClick(row) {
            this.$refs.table.toggleRowSelection(row);
            this.content = row.content.replace(/<img/g, "<img style='width: 100%;'");
            this.dialogTitle = "预览文章";
            this.dialogView = "Preview";
            this.dialogVisible = true;
        },
        onDialogClose() {
            this.$refs.table.clearSelection();
        },
        tapButton(item) {
            if (item.path === "add") {
                this.onAdd();
            } else if (item.path === "edit") {
                this.onEdit();
            } else if (item.path === "delete") {
                this.onDelete();
            }
        }
    }
};
</script>